<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <style>
        .active {
            background-color: #ddd;
        }
    </style>
</head>
<body>
<!-- 宿主文件 -->
<div id="app">
    <h2 :title="title">
        <!-- 插值表达式！ -->
        {{title}}
    </h2>
    <!--        用户输入 -->
    <p>
        <input
                type="text"
                v-model="course"
                v-on:keydown.enter="addCourse"
        >
        <button @click="addCourse">新增！</button>
    </p>
    <!--    条件渲染-->
        <!--
        v-show VS v-if：
        •v-show通过css属性display控制元素显示，元素总是存在
        .v-if惰性渲染元素，若一开始条件为falsy，元素是不存在的
        -->
    <p v-if="courses.length == 0">没有任何课程信息！</p>
    <!--    列表渲染-->
    <!--    <div-->
    <!--            :class="{active: selectedCourse === c}"-->
    <!--            @click="selectedCourse = c"-->
    <!--            v-for="c-->
    <!--            in courses"-->
    <!--            :key="c">-->
    <!--        <div>-->
    <!--            {{ c }}-->
    <!--        </div>-->
    <!--    </div>-->

    <div class="course-list" v-else>
        <div
                :style="{backgroundColor: selectedCourse === c ? '#ddd' : 'transparent'}"
                @click="selectedCourse = c"
                v-for="c
            in courses"
                :key="c">
            <div>
                {{ c }}
            </div>
        </div>
    </div>
</div>

<script src="../js/vue.js"></script>
<script>
    // 1、创建Vue的实例
    const app = new Vue({
        el: "#app",
        data() {
            return {
                title: '开课吧，购物车!',
                course: '',
                selectedCourse: '',
                courses: []
            }
        },
        methods: {
            addCourse() {
                // 1、添加course到数组
                this.courses.push(this.course)
                // 2、清空course
                this.course = ''
            }
        },
    })
</script>
</body>
</html>
